<style>
    .ly-button-group-2{
        position: relative;
        box-sizing: border-box;
    }
    .ly-button-group-2 >*{
        float: left;
        box-sizing: border-box;
        width: calc(50% - 5px)
    }

    .ly-button-group-2 >*:nth-child(3) {
        margin-top: 10px;
        margin-left: 0;
    }

    .ly-button-group-2 >*:nth-child(4) {
        margin-top: 10px;
    }

    .ly-button-group-2>*:nth-child(5) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-2>*:nth-child(6) {
        margin-top: 10px;
    }
    .ly-button-group-2>*:nth-child(7) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-2>*:nth-child(8) {
        margin-top: 10px;
    }
    .ly-button-group-2>*:nth-child(9) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-2>*:nth-child(10) {
        margin-top: 10px;
    }
    .ly-button-group-2>*:nth-child(11) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-2>*:nth-child(12) {
        margin-top: 10px;
    }

    .ly-button-group-3{
        position: relative;
        box-sizing: border-box;
    }
    .ly-button-group-3 >*{
        float: left;
        box-sizing: border-box;
        width: calc(33.3% - 7px)
    }

    .ly-button-group-3 >*:nth-child(4) {
        margin-top: 10px;
        margin-left: 0;
    }

    .ly-button-group-3>*:nth-child(5) {
        margin-top: 10px;
    }
    .ly-button-group-3>*:nth-child(6) {
        margin-top: 10px;
    }
    .ly-button-group-3>*:nth-child(7) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-3>*:nth-child(8) {
        margin-top: 10px;
    }
    .ly-button-group-3>*:nth-child(9) {
        margin-top: 10px;
    }

    .ly-button-group-3>*:nth-child(10) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-3>*:nth-child(11) {
        margin-top: 10px;
    }
    .ly-button-group-3>*:nth-child(12) {
        margin-top: 10px;
    }

    .ly-button-group-4{
        position: relative;
        box-sizing: border-box;
    }
    .ly-button-group-4 >*{
        float: left;
        box-sizing: border-box;
        width: calc(25% - 8px)
    }

    .ly-button-group-4>*:nth-child(5) {
        margin-top: 10px;
        margin-left: 0;
    }
    .ly-button-group-4>*:nth-child(6) {
        margin-top: 10px;
    }
    .ly-button-group-4>*:nth-child(7) {
        margin-top: 10px;
    }
    .ly-button-group-4>*:nth-child(8) {
        margin-top: 10px;
    }
    .ly-button-group-4>*:nth-child(9) {
        margin-top: 10px;
        margin-left: 0;
    }

    .ly-button-group-4>*:nth-child(10) {
        margin-top: 10px;
    }
    .ly-button-group-4>*:nth-child(11) {
        margin-top: 10px;
    }
    .ly-button-group-4>*:nth-child(12) {
        margin-top: 10px;
    }

</style>
<template>
    <div  :class="['ly-button-group-'+size]">
        <slot></slot>
        <div class="clear" style="float: none;"></div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-button-group',
            props: {
                size:{
                    'default':2
                }
            }, watch: {

            }, data: function () {
                return {

                };
            }, created: function () {

            }, destroyed:function () {

            },methods: {

            }
        }
    });
</script>


